<template>
  <div>
    <div class="mask"></div>
    <div class="new_vs">
      <div class="vs-top">
        <p>新建资料</p>
        <i class="el-icon-close" @click="close"></i>
      </div>
      <div class="info">
        <p>卡别编号</p>
        <el-input v-model="no" class="norm" size="mini"></el-input>
        <p>卡名</p>
        <el-select
          class="norm"
          size="mini"
          v-model="name"
          filterable
          allow-create
          default-first-option
        >
          <el-option
            v-for="item in nameList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="info">
        <p>折数</p>
        <el-input
          v-model="discount"
          class="norm"
          size="mini"
          @blur="handleDiscountBlur"
          type="number"
        ></el-input>
        <p>是否编辑</p>
        <el-switch v-model="edit"></el-switch>
      </div>
      <div class="vs-btn">
        <el-button @click="close">取消</el-button>
        <el-button @click="save" type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { insert } from '../../../../network/card'

export default {
  data() {
    return {
      no: '',
      name: '',
      nameList: ['铂金', '金卡'],
      discount: '',
      edit: false
    }
  },
  methods: {
    /* 折数失去焦点的时候，触发的函数 */
    handleDiscountBlur() {
      if (this.discount > 10) {
        this.$message.warning('折数只能在1~10之间，最大值是10')
        return (this.discount = 10)
      }
      if (this.discount <= 0) {
        this.$message.warning('折数只能在1~10之间，最小值是1')
        return (this.discount = 1)
      }
    },
    close() {
      this.$emit('closeNew')
    },
    save() {
      if (!this.no) {
        this.$message.info('请填写卡别编号')
        return
      }
      if (!this.name) {
        this.$message.info('请选择卡名')
        return
      }
      if (!this.discount) {
        this.$message.info('请填写折数')
        return
      }
      let d = {
        cardNo: this.no,
        cardName: this.name,
        discount: Number(this.discount),
        isEdit: Number(this.edit)
      }
      insert(JSON.stringify(d)).then((res) => {
        if (res.data.code == 200) {
          this.$message.success('保存成功')
          // 关闭弹出层，刷新数据
          this.$emit('closeNewBUildDialog')
        }
      })
    }
  }
}
</script>

<style scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_vs {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  background-color: white;
  height: auto;
  width: 30vw;
  height: 25vh;
}
.vs-top {
  height: 40px;
  background-color: #f8f8f8;
}
.vs-top p {
  float: left;
  line-height: 40px;
  padding-left: 20px;
  font-weight: bold;
}
.vs-top i {
  float: right;
  line-height: 40px;
  padding: 0 16px;
}
.vs-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 20px 20px 0;
}

.info {
  display: flex;
  margin-top: 2vh;
}
.info p {
  width: 4vw;
  white-space: nowrap;
  text-align: right;
  margin-right: 1vw;
}

.norm {
  width: 9vw;
}
</style>
